<template>
  <quyu ref="quyuRef" />
  <el-container>
    <el-aside width="150px">
      <div class="list">
        <span
          :class="{ active: index === 3 }"
          v-for="(item, index) in 10"
          :key="item"
          >楼层{{ item }}</span
        >
      </div>
    </el-aside>
    <el-container>
      <el-header height="50px">
        <div class="tab">
          <span v-for="item in 3" :key="item"> 导航{{ item }}</span>
          <el-button @click="changeQuyu" type="primary">添加</el-button>
        </div>
      </el-header>
      <el-main>
        <div class="content">
          <showCanvas />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import quyu from './components/quyu.vue'
import showCanvas from '@/components/showCanvas.vue'
import { ref } from 'vue'

const quyuRef = ref()
const changeQuyu = () => {
  quyuRef.value.dialogVisible = true
}
</script>

<style lang="scss" scoped>
.el-container,
.el-main,
.content {
  height: 100%;
  width: 100%;
}
.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border: 1px solid #eee;
  }
  .active {
    color: red;
    font-weight: 700;
  }
}
.tab {
  height: 100%;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  font-size: 20px;
  span {
    margin-right: 20px;
  }
}
.content {
  position: relative;
}
</style>
